<template>
   <div>
    {{ man.name }}
    {{ man1.name }}
    {{ obj }}
    <button @click="change">点击切换名字</button>
   </div>
</template>
<script setup lang="ts">
import { ref, isRef, shallowRef, triggerRef, customRef } from "vue";
// ref 和shallowRef 不能一块写 不然会影响shallowRef 造成视图的更新
const man = ref({name:'小满'});
const man1 = shallowRef({name:'小满2'});
const obj = myRef<string>('customRef');
const change = () => {
  // man.value.name = "大满";
  // man1.value.name = "hahahaha";
  // triggerRef(man1);
  // console.log(man1);
  obj.value = "heiheiheihei";
}
function myRef<T>(value: T) {
  return customRef((track, trigger)=> {
    return {
      get() {
        track();
        return value;
      },
      set(newVal) {
        value = newVal;
        trigger();
      }
    }
  })
}
</script>
<style scoped>
</style>
